<template>
    <view class="theme-selector">
        <!-- 卡片头部 -->
        <view class="card-header">
            <text class="card-title">🎨 主题设置</text>
            <text class="card-desc">选择你喜欢的界面风格</text>
        </view>
        
        <!-- 当前主题显示 -->
        <view class="current-theme-display" @click="toggleStyleChooser">
            <view class="theme-preview-large">
            </view>
            <view class="current-theme-info">
                <text class="current-theme-name">{{ getCurrentThemeName() }}</text>
                <text class="current-theme-desc">点击更换主题</text>
            </view>
            <view class="arrow-right">
                <text class="arrow-icon" :class="{ rotate: showStyleOptions }">→</text>
            </view>
        </view>

        <!-- 风格选择器 -->
        <view class="style-chooser" v-if="showStyleOptions">
            <view v-for="theme in styleOptions" :key="theme.value"
                :class="['style-option', { active: currentAppStyle === theme.value }]"
                :style="{ background: theme.primaryGradient }"
                @click="setAppStyle(theme.value)">
                <text class="style-name">{{ theme.name }}</text>
                <text class="check-icon" v-if="currentAppStyle === theme.value">✔</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { setTheme, getThemeStyles, getThemeOptions } from '@/stores/theme';
import { ThemeConfig } from '@/stores/theme';

/**
 * 风格选项配置 - 从 theme store 获取
 */
const styleOptions = ref<ThemeConfig[]>([]);

/**
 * 是否显示风格选择器
 */
const showStyleOptions = ref(false);

/**
 * 当前应用风格
 */
const currentAppStyle = ref('default');

/**
 * 获取当前主题名称
 */
const getCurrentThemeName = () => {
    const theme = styleOptions.value.find(t => t.value === currentAppStyle.value);
    return theme ? theme.name : '默认风格';
};



/**
 * 切换风格选择器显示状态
 */
const toggleStyleChooser = () => {
    showStyleOptions.value = !showStyleOptions.value;
};

/**
 * 设置应用风格
 */
const setAppStyle = (style: string) => {
    // 保存到响应式变量
    currentAppStyle.value = style;

    // 保存到本地存储，确保刷新页面后主题保持
    uni.setStorageSync('appStyle', style);

    // 使用主题 store 切换全局主题
    setTheme(style);

    // 显示提示
    uni.showToast({
        title: '风格已切换',
        icon: 'success',
        duration: 2000
    });

    // 关闭选择器
    showStyleOptions.value = false;

    // 触发自定义事件，通知父组件主题已更改
    emit('themeChanged', style);
};

/**
 * 组件事件定义
 */
const emit = defineEmits(['themeChanged']);

/**
 * 组件初始化
 */
onMounted(() => {
    // 初始化主题选项
    styleOptions.value = getThemeOptions();

    // 初始化时加载当前主题，验证主题是否存在
    const savedTheme = uni.getStorageSync('appStyle') || 'default';
    const validThemes = styleOptions.value.map(option => option.value);

    // 如果保存的主题不在有效主题列表中，使用默认主题
    let isValidTheme = false;
    for (let i = 0; i < validThemes.length; i++) {
        if (validThemes[i] === savedTheme) {
            isValidTheme = true;
            break;
        }
    }

    if (isValidTheme) {
        currentAppStyle.value = savedTheme;
    } else {
        currentAppStyle.value = 'default';
        // 更新本地存储为默认主题
        uni.setStorageSync('appStyle', 'default');
    }

    // 应用保存的主题
    setTheme(currentAppStyle.value);
});
</script>

<style lang="scss" scoped>
.theme-selector {
    width: 100%;
}

/* 卡片头部 */
.card-header {
    margin-bottom: 32rpx;
}

.card-title {
    font-size: 36rpx;
    font-weight: 700;
    color: v-bind('getThemeStyles().textPrimary');
    display: block;
    margin-bottom: 8rpx;
}

.card-desc {
    font-size: 26rpx;
    color: v-bind('getThemeStyles().textSecondary');
}

/* 当前主题显示区域 */
.current-theme-display {
    display: flex;
    align-items: center;
    padding: 32rpx;
    background: v-bind('getThemeStyles().bgCard');
    border-radius: 24rpx;
    border: 1px solid v-bind('getThemeStyles().borderLight');
    box-shadow: v-bind('getThemeStyles().cardBoxShadow');
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        transform: translateY(-4rpx);
        box-shadow: v-bind('getThemeStyles().hoverBoxShadow');
    }

    &:active {
        transform: translateY(-2rpx);
    }
}

.theme-preview-large {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: v-bind('getThemeStyles().primaryGradient');
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    box-shadow: v-bind('getThemeStyles().buttonBoxShadow');
}

.preview-dot-large {
    font-size: 32rpx;
    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.current-theme-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.current-theme-name {
    font-size: 32rpx;
    font-weight: 600;
    color: v-bind('getThemeStyles().textPrimary');
    margin-bottom: 8rpx;
}

.current-theme-desc {
    font-size: 26rpx;
    color: v-bind('getThemeStyles().textSecondary');
}

.arrow-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background: v-bind('getThemeStyles().bgSecondary');
    transition: all 0.3s ease;
}

.arrow-icon {
    font-size: 24rpx;
    color: v-bind('getThemeStyles().textSecondary');
    transition: transform 0.3s ease;

    &.rotate {
        transform: rotate(90deg);
    }
}

/* 风格选择器 */
.style-chooser {
    margin-top: 24rpx;
    padding: 24rpx;
    background: v-bind('getThemeStyles().bgCard');
    border-radius: 24rpx;
    border: 1px solid v-bind('getThemeStyles().borderLight');
    box-shadow: v-bind('getThemeStyles().cardBoxShadow');
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx;
}

.style-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32rpx 16rpx;
    border-radius: 16rpx;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 120rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);

    &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.25);
    }

    &:active {
        transform: translateY(-2rpx);
    }

    &.active {
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.3);
    }
}


.style-name {
    font-size: 24rpx;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    margin-bottom: 4rpx;
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
}

.check-icon {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    font-size: 20rpx;
    color: rgba(255, 255, 255, 0.95);
    font-weight: bold;
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
    .style-chooser {
        grid-template-columns: repeat(3, 1fr);
        gap: 12rpx;
        padding: 20rpx;
    }

    .style-option {
        padding: 20rpx 8rpx;
        min-height: 80rpx;
    }

    .style-name {
        font-size: 20rpx;
    }
}
</style>
